<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4.改变样式</title>
    <style>
        .box{
            color: yellowgreen;
            font-size: large;
        }
        .d2{
            color: rgb(43, 226, 101);
            font-size: large;
        }
        
    </style>
</head>
<body>
    <div class="box">段落1<span>内容</span></div>
        <div class="box">段落2</div>
        <div class="box">段落3</div>
        <img src="./6c03c9ade060fc9cddcad31fc3dadfec371d8cad.jpg" alt="">
    <img src="https://i1.hdslb.com/bfs/banner/01171db38c7ad1019a50b797a7161d58179e48cc.png@976w_550h_1c_!web-home-carousel-cover.avif" alt="">
</body>
<script>
    var box0=document.getElementsByClassName('box')[0]
    var box1=document.getElementsByClassName('box')[1]
    var box2=document.getElementsByClassName('box')[2]
    var img=document.getElementsByTagName('img')[0]
    //下面就是添加行内样式<div class="box" style.color='pink'>段落2</div>，给元素添加style属性，值为color:pink
    box1.style.color='pink'
    //想要用以下方式获取元素的样式属性只能获取行内样式（内联样式）
    console.log(box1.style.color)
    box2.className='d2'
    console.log(box2.className)
    img.title='picture1'
    console.log(img.title)


    var img1=img.getAttribute('src')
    console.log(img1)//获取scr里面的内容
    console.log(img.src)//获取这个图片的位置

    img.className='aaa'//只能添加固定的一个句子改一个值
    img.setAttribute('class','bbb')//可以添加自定义属性如img.setAttribute('随便起一个属性名','值')
    img.removeAttribute('class')//删除属性
</script>
</html>